<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{fruits[0]}} {{fruits[1]}} {{fruits[2]}}
			<h1 v-for="(item,index) in fruits">
				每{{index+1}}种水果：{{item}}
			</h1>
			{{list[0]}} {{list[1]}} {{list[2]}}
			<h2 v-for="(item,index) in list">
				每{{index+1}}种习惯：{{item}}
			</h2>
			0-10
			<h1 v-for="i in 11">
				{{i-1}}
			</h1>
			对象 属性值 属性名称
			
			
			<ul>
				<li v-for="(item,index) in goods">
					商品名称：{{item.title}} <br>
					商品价格：{{item.price}}
				</li>
			</ul>
			<table border="1">
				<tr v-for="row in table">
					<td v-for="col in row">{{col}}</td>
					
				</tr>
			</table>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						fruits: ['苹果', '香蕉', '梨'] ,//定义一个数组
						list:['吃饭','睡觉','学习'],
						student:{
							name:'张三',
							cls:'软技2306'
						},
						goods:[  //商品列表
						{
							
						}],
						table:[
							[1,2,4,1,0,0,],
							[1,2,4,2,1,1,],
							[1,1,5,1,0,0,],
							
						]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>